<template>
	<view class="gui-padding">

		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view class="gui-margin-top-large"></view>
		<form @submit="submit">

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">昵称</text>
				<view class="gui-form-body">
					<input type="nickname" class="gui-form-input" v-model="nickname" name="nickname" placeholder="请输入昵称"
						@blur="bindblur" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b" v-if="mobile==''">
				<text class="gui-form-label">手机号</text>
				<view class="gui-form-body">
					<button type="default" size="mini" class="gui-button gui-bg-green" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber">
						<text class="gui-icons gui-button-text-mini gui-color-white">授权微信手机号</text>
					</button>
				</view>
			</view>
			<view class="gui-form-item gui-border-b" v-if="mobile!=''">
				<text class="gui-form-label">手机号</text>
				<view class="gui-form-body">
					<span class="gui-form-input" name="mobile">{{mobile}}</span>
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">性别</text>
				<view class="gui-form-body">
					<picker mode="selector" :range="gender" @change="pickerChange">
						<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
							<text class="gui-text">{{gender[genderIndex]}}</text>
							<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
						</view>
					</picker>
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">年龄</text>
				<view class="gui-form-body">
					<input type="number" class="gui-form-input" v-model="age" name="age" placeholder="请输入年龄" />
				</view>
			</view>
			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">头像</text>
				<button type="default" size="mini" class="gui-button gui-bg-green" open-type="chooseAvatar"
					style="margin-right:350rpx;" @chooseavatar="onChooseavatar">
					<text class="gui-icons gui-button-text-mini gui-color-white"
						style="padding-right:10rpx;">使用微信头像</text>
				</button>

			</view>

			<view class="gui-margin-top">
				<gui-image :src="avatar_pic" borderRadius="10rpx" v-if="avatar_pic!=''"></gui-image>
			</view>



			<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
				<button type="default" class="gui-button gui-bg-blue" style="width:200rpx;" formType="submit">
					<text class="gui-icons gui-color-white gui-button-text">提交</text>
				</button>
			</view>
			<view style="height:100rpx;"></view>
		</form>
	</view>
</template>
<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				textareaVal: '',
				subtxt: '',
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				nickname: '',
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0,
				mobile: '',
				age: '',
				avatar_pic: ''
			}
		},
		onLoad: function() {
			this.$globalMethod();
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.user/my_info', //仅为示例，并非真实接口地址。

					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.nickname = return_data.data.member_info.nickname;
							_this.mobile = return_data.data.member_info.mobile;
							var member_identity_list = return_data.data.member_identity_list;
							_this.age = member_identity_list[0].age;
							_this.avatar_pic = return_data.data.member_info.avatar_pic;
							_this.genderIndex = return_data.data.member_info.sex;
						}
					}
				});
			},
			onChooseavatar(e) {
				console.log(e);
				this.avatar_pic = e.detail.avatarUrl;
			},
			bindblur(e) {
				console.log(e);
				console.log(this.nickname);
			},
			onGetPhoneNumber(e) {
				console.log(e);
				this.graceJS.post(this.serverUrl + '/api.wechat/get_phone_number', {
						code: e.detail.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}, 'form', {
						token: this.token
					}, (res) => {
						console.log(res);
					},
					(e) => {
						console.log(e);
					})
			},
			change: function(e) {
				this.needPploadedImgs = e;
			},
			// 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);
				// 组合数据给后端 api 提交
				var sendData = {
					imgs: uploadedImgs,
					// 其他表单数据
					content: this.textareaVal
				};
				console.log('全部数据 :');
				console.log(sendData);
				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
			},
			submit: function(e) {
				//定义表单规则

				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				formData['sex'] = this.genderIndex;
				formData['mobile'] = this.mobile;
				formData['avatar_pic'] = this.avatar_pic;

				console.log(formData);

				let _this = this;
				_this.$refs.guipageloading.open();

				uni.uploadFile({
					url: _this.serverUrl + '/api.member/update_user', //仅为示例，非真实的接口地址
					filePath: this.avatar_pic,
					name: 'avatar_pic',
					formData: formData,
					header: {
						'token': _this.token
					},
					success: (uploadFileRes) => {
						_this.$refs.guipageloading.close();
						var return_data = uploadFileRes.data;
						if (return_data.code == 0) {
							uni.showToast({
								title: return_data.msg,
								icon: 'success'
							});

							uni.navigateTo({
								url: '/pages/my/index'
							});
						} else {
							uni.showToast({
								title: return_data.msg,
								icon: 'error'
							});
						}
					}
				});




				console.log(formData);
				return false;


			},
			pickerChange: function(e) {
				this.genderIndex = e.detail.value;
			},
		}
	}
</script>
<style>

</style>